<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例和容器的关系是一夫一妻制</title>
    <!--安装vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<!--准备容器-->
<div class="app">
    <h1>{{msg}}</h1>
</div>

<div class="app">
    <h1>{{msg}}</h1>
</div>

<div id="app2">
    <h1>{{name}}</h1>
</div>

<!--Vue程序-->
<script>
    /*
    * 验证:一个Vue实例可以接管多个容器吗?
    *   不能。一个Vue实例只能接管一个容器.一旦接管到容器之后,即使后面有相同的容器,Vue也是不管的
    *   因为Vue实例已经取到媳妇了
    * */
    new Vue({
        el : '.app',
        data : {
            msg : 'Hello Vue!!'
        }
    })

    new Vue({
        el : '#app2',
        data : {
            name : 'zhangsan'
        }
    })

    //这个Vue实例想去接管 id='app2'的容器,但是这个容器已经被上面的Vue接管了,所以,他只能打光棍了
    new Vue({
        el : '#app2',
        data : {
            name : 'jackson'
        }
    })


</script>


</body>
</html>